<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:a="http://richfaces.org/a4j">
	<h:panelGrid styleClass="personInfo">
		<h:outputText
			value="#{title}"
			style="font-size: 13px;" />
	</h:panelGrid>
	<rich:spacer width="100%" height="10" />
	<ui:remove>
		- Convert set to list because if use set of object on data table, an logic bug will occurs
		: the key is added first and end by '['+key+']'
		- There are wrong things... I don't know!!
	</ui:remove>
	<c:set value="#{atsmUtils.toList(data.keySet())}" var="keySet" />
	<c:set value="#{keySet[0]}" var="firstKey" />
	<c:set value="#{data[firstKey].from}" var="from" />
	<c:set value="#{data[firstKey].to}" var="to" />
	<c:set value="#{data[firstKey].departDayAndDate}" var="dayAndDate" />
	
	<rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
		onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
		cellpadding="0" cellspacing="0" width="700" border="0" var="k"
		value="#{keySet}">
		<f:facet name="header">
			<h:outputText style="font-size: 13px;"
				value="#{from} #{bookingmsgs['booking.ticketInfo.to']} #{to}, #{dayAndDate}" />
		</f:facet>
		<rich:column style="text-align: center;" id="cl_from">
			<f:facet name="header">
				<h:outputText value="#{bookingmsgs['booking.datatTable.departCol']}" />
			</f:facet>
			<h:outputText value="#{data[k].fromCode}" style="color: navy;"/>
			<br />
			<h:outputText value="#{k}" styleClass="navyBold"/>
		</rich:column>
		<rich:column style="text-align: center;" id="cl_to">
			<f:facet name="header">
				<h:outputText
					value="#{bookingmsgs['booking.datatTable.ArrivesCol']}" />
			</f:facet>
			<h:outputText value="#{data[k].toCode}" style="color: navy;"/>
			<br />
			<h:outputText value="#{data[k].arriveTime}" styleClass="navyBold"/>
		</rich:column>
		<rich:column id="cl_flightInfo" style="text-align: center;">
			<f:facet name="header">
				<h:outputText
					value="#{bookingmsgs['booking.datatTable.flightInfoCol']}" />
			</f:facet>
			<rich:togglePanel switchType="client" height="100%"
				stateOrder="closed,expanded">
				<f:facet name="closed">
					<f:subview>
						<h:panelGrid style="width: 100%;" columns="1" columnClasses="tp-gp-col1">
							<h:outputText value="#{data[k].plane}" />
							<rich:toggleControl styleClass="rich-tglctr-override">
								<h:outputText value="[+]"/>
							</rich:toggleControl>
						</h:panelGrid>
					</f:subview>
				</f:facet>
				<f:facet name="expanded">
					<f:subview>
						<h:panelGrid columns="1" style="width: 100%;" columnClasses="tp-gp-col1">
							<h:graphicImage value="/img/logo.png" />
							<h:outputText value="Vietnam Airline" styleClass="navyBold"/>
							<h:outputText value="#{data[k].plane}" />
							<rich:toggleControl switchToState="closed" styleClass="rich-tglctr-override">
								<h:outputText value="[-]" />
							</rich:toggleControl>
						</h:panelGrid>
					</f:subview>
				</f:facet>
			</rich:togglePanel>
		</rich:column>
		<rich:column id="cl_stop" style="text-align: center;">
			<f:facet name="header">
				<h:outputText value="#{bookingmsgs['booking.datatTable.stopsCol']}" />
			</f:facet>
			<h:outputText value="#{bookingmsgs['booking.datatTable.noStop']}" />
		</rich:column>
		<ui:remove>
				- Chả biết tại sao không thể dùng c:if để test null bằng cách empty data[k].bussinessFlex!!!
				- Đúng là đồ điên, chả hiểu cái c:if
				- Không có gì điên, và cũng không có gì là khó hiểu, tất cả là do mình --> đặt @Begin(join=true)
				không đúng chỗ, (right place is search method) and maybe also missing @Conversational annotation
		</ui:remove>
		<rich:column id="cl_bussinessFlex" style="text-align: center;">
			<f:facet name="header">
				<h:outputText
					value="#{bookingmsgs['booking.datatTable.bussinessCol']}" />
			</f:facet>
			<h:outputText value="#{bookingmsgs['booking.datatTable.noTicket']}"
				rendered="#{data[k].bussinessFlex == null}" styleClass="navyBold"/>
			<h:panelGroup rendered="#{data[k].bussinessFlex != null}">
				<input type="radio" id="rdBussinessFlex" name="#{rdId}" class="tp-gp-col1 navyBold"
					onchange="#{functionName}('#{data[k].bussinessFlex.value}')">
					 <h:outputText value="#{data[k].bussinessFlex.label}" styleClass="navyBold"/> 
				</input>
				<h:outputText value="VND"
					rendered="#{data[k].bussinessFlex != null}" styleClass="navyBold" />
			</h:panelGroup>
		</rich:column>
		<rich:column id="cl_economicFlex" style="text-align: center;">
			<f:facet name="header">
				<h:outputText value="#{bookingmsgs['booking.datatTable.ecoCol']}" />
			</f:facet>
			<h:outputText value="#{bookingmsgs['booking.datatTable.noTicket']}"
				rendered="#{data[k].economicFlex == null}" styleClass="navyBold" />
			<h:panelGroup rendered="#{data[k].economicFlex != null}">
				<input type="radio" id="rdEconomicFlex" name="#{rdId}" onchange="#{functionName}('#{data[k].economicFlex.value}')" class="tp-gp-col1 navyBold">
					<h:outputText value="#{data[k].economicFlex.label}" styleClass="navyBold"/>
				</input>
				<h:outputText value="VND"
					rendered="#{data[k].economicFlex != null}" styleClass="navyBold" />
			</h:panelGroup>
		</rich:column>
		<rich:column id="cl_saverFlex" style="text-align: center;">
			<f:facet name="header">
				<h:outputText
					value="#{bookingmsgs['booking.datatTable.saverFlexCol']}" />
			</f:facet>
			<h:outputText value="#{bookingmsgs['booking.datatTable.noTicket']}"
				rendered="#{data[k].saverFlex == null}" styleClass="navyBold"/>
			<h:panelGroup rendered="#{data[k].saverFlex != null}">
				<input type="radio" id="rdSaverFlex" name="#{rdId}" class="tp-gp-col1 navyBold"
					onchange="#{functionName}('#{data[k].saverFlex.value}')"> 
					<h:outputText
						value="#{data[k].saverFlex.label}" styleClass="navyBold"/> 
				</input>
				<h:outputText value="VND" rendered="#{data[k].saverFlex != null}"
					styleClass="navyBold" />
			</h:panelGroup>
		</rich:column>
		<rich:column id="cl_saver" style="text-align: center;">
			<f:facet name="header">
				<h:outputText value="#{bookingmsgs['booking.datatTable.saverCol']}" />
			</f:facet>
			<h:outputText value="#{bookingmsgs['booking.datatTable.noTicket']}" styleClass="navyBold"
				rendered="#{data[k].saver == null}" />
			<h:panelGroup rendered="#{data[k].saver != null}">
				<input type="radio" id="rdSaver" name="#{rdId}" onchange="#{functionName}('#{data[k].saver.value}')" class="tp-gp-col1 navyBold"> 
					<h:outputText value="#{data[k].saver.label}" styleClass="navyBold"/>
				</input>
				<h:outputText value="VND" rendered="#{data[k].saver != null}"
					styleClass="navyBold" />
			</h:panelGroup>
		</rich:column>
	</rich:dataTable>

	<c:if test="${functionName eq 'departCallCheck'}">
		<a:jsFunction name="departCallCheck">
			<a:actionparam name="param"
				assignTo="#{ticketBooking.selectedDepartTicketDTO}" />
		</a:jsFunction>
	</c:if>
	<c:if test="${functionName eq 'returnCallCheck'}">
		<a:jsFunction name="returnCallCheck">
			<a:actionparam name="param"
				assignTo="#{ticketBooking.selectedReturnTicketDTO}" />
		</a:jsFunction>
	</c:if>
</ui:composition>